<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="./../home.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:pe="http://primefaces.org/ui/extensions">

    <ui:define name="content" >
        <div class="col-lg-12">
            <h3 class="page-header" id="comercio">
                Administracion de 
                <h:outputText value="Historial Clinico" style="color:#00BFFF;" />
                <h:link value="Regresar a Listado" outcome="list.xhtml" styleClass="pull-right" style="font-size: 16px; margin-right: 30px;"  />
            </h3>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-primary">
                    <h:messages id="msg" globalOnly="true" styleClass="list-group" infoClass="list-group-item list-group-item-success"
                                errorClass="list-group-item list-group-item-danger" />
                    <div class="panel-heading" style="font-weight: bold;" >Registrar Historial</div>
                    <div class="panel-body">
                        <div class="row" id="modificarComercio">
                            <div class="col-lg-10 col-lg-offset-1">
                                <h:form id="frmRegistrarHistorial" styleClass="form-horizontal"  >
                                    <f:event type="preRenderView" listener="#{historialBean.initUpdate}" />
                                    <h4>Datos del Perro</h4>
                                    <div class="line-separator"></div>
                                    <div class="form-group has-feedback">
                                        <label for="nombre" style="text-align: right;" class="col-sm-2 control-label">Nombre :</label>
                                        <div class="col-sm-4" >
                                            <p class="form-control-static">#{historialBean.perro.nombre}</p>
                                        </div>
                                        <label for="color" style="text-align: right;" class="col-sm-2 control-label">Color :</label>
                                        <div class="col-sm-4">
                                            <p class="form-control-static">#{historialBean.perro.color}</p>
                                        </div>
                                    </div>
                                    <div class="form-group has-feedback"> 
                                        <label for="rol" class="col-sm-2 control-label" style="text-align: right;">Raza :</label>
                                        <div class="col-sm-3">
                                            <p class="form-control-static">#{historialBean.perro.raza.descripcion}</p>
                                        </div>						
                                        <label for="fechaNaci" class="col-sm-5 control-label" style="text-align: right;">Fecha de nacimiento :</label>
                                        <div class="col-sm-2" style="padding-top: 7px;">
                                            <h:outputText class="form-control-static" value="#{historialBean.perro.fechaNacimiento}" >
                                                <f:convertDateTime pattern="dd/MM/yyyy" />
                                            </h:outputText>
                                        </div>
                                    </div>
                                    <h4>Datos del Historial</h4>
                                    <div class="line-separator" style="margin-bottom: 10px;"></div>
                                    <div class="form-group has-feedback">
                                        <label for="nombre" style="text-align: right;" class="col-sm-2 control-label">Peso :</label>
                                        <div class="col-sm-4" >
                                            <pe:inputNumber value="#{historialBean.historial.peso}" symbol=" kg" symbolPosition="s" maxValue="300"   />
                                        </div>
                                        <label for="color" style="text-align: right;" class="col-sm-2 control-label">Estatura :</label>
                                        <div class="col-sm-4">
                                            <pe:inputNumber value="#{historialBean.historial.estatura}" maxValue="1" symbolPosition="s"  symbol=" m" />
                                        </div>
                                    </div>
                                    <div class="form-group has-feedback">
                                        <label for="color" class="col-sm-2 control-label" style="text-align: right;">Enfermedad :</label>
                                        <div class="col-sm-4">
                                            <h:selectOneMenu value="#{historialBean.historial.enfermedad.id}" styleClass="form-control">
                                                 <f:selectItem itemValue="0" itemLabel="Seleccionar" />
                                                <f:selectItems value="#{historialBean.enfermedades}" var="col" itemLabel="#{col.nombre}" itemValue="#{col.id}" />
                                            </h:selectOneMenu>
                                            <span class="glyphicon-remove form-control-feedback">
                                                <i  style="color: red;font-size: 20px;font-weight: bold;">*</i>
                                            </span>
                                        </div>						
                                    </div>
                                    <div class="form-group has-feedback">
                                        <div class="col-sm-3" >
                                            <p class="form-control-static">Diagnostico :</p>
                                        </div>
                                    </div>
                                    <div class="form-group has-feedback">
                                        <div class="col-sm-10" >
                                            <p:inputTextarea value="#{historialBean.historial.diagnostico}" style="width: 95%;" />
                                        </div>
                                    </div>
                                    <div class="form-group has-feedback">
                                        <div class="col-sm-3" >
                                            <p class="form-control-static">Tratamiento :</p>
                                        </div>
                                    </div>
                                    <div class="form-group has-feedback">
                                        <div class="col-sm-10" >
                                            <p:inputTextarea value="#{historialBean.historial.tratamiento}" style="width: 95%;" />
                                        </div>
                                    </div>
                                    <p:commandButton value="Actualizar" id="btnBoton" onstart="PF('blockUIWidget').block()"
                                                     oncomplete="PF('blockUIWidget').unblock();subir();" styleClass="btn btn-primary" actionListener="#{historialBean.actualizarHistorial}" update="@form :msg" />
                                    <pe:blockUI widgetVar="blockUIWidget" >  
                                        <h:panelGrid columns="2">  
                                            <h:graphicImage library="image" name="cargar.gif"  
                                                            style="margin-right: 5px; vertical-align: middle;"/>  
                                            <h:outputText value="Espere ..." style="white-space: nowrap;"/>  
                                        </h:panelGrid>  
                                    </pe:blockUI>  
                                </h:form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            function subir() {
                window.scrollTo(0, 0);
            }
        </script>
    </ui:define>
</ui:composition>
